<template>
  <div class="nocopy">
    <div id="printMe" class="contentBox" ref="imageWrapper">
      <img src="@/assets/image/code-detail-bg.jpg" alt="" width="100%" height="100" class="objectFitCover">
      <h4 class="pageTitle">
        {{ dataInfo.firmName}}

        {{ dataInfo.customerName }}
        <span v-if="dataInfo.reportType !== '专项审计业务' && dataInfo.reportType !== '验资业务' && dataInfo.reportType !== '其它'">{{ dataInfo.auditYear }}年</span>
        <span>{{ dataInfo.titleSuffixName }}</span>
      </h4>
      <div class="cardBox">
        <p class="title">防伪信息</p>
        <div v-if="dataInfo.dataStatus === '4'" class="invalidBox">
          <span class="iconfont iconshibai" style="font-size: 90px; color: #e85252"></span>
          <p>该报告信息调整中: <span class="colorDanger fontSize28 marginLeft20">信息已作废</span></p>
        </div>
        <ul v-else class="detailUl">
          <li>
            <p><span>防伪编码</span><span>{{ dataInfo.antiCounterfeitingCoding}}</span></p>
            <p><span>被审（验）单位名称</span><span>{{ dataInfo.customerName }}</span></p>
          </li>
          <li>
            <p><span>报告文号</span><span>{{ dataInfo.reportNo }}</span></p>
            <p><span>报备类型</span><span>{{ dataInfo.reportType}}</span></p>
          </li>
          <li>
            <p><span>审计年度</span><span>{{ dataInfo.auditYear }}</span></p>
            <p><span>意见类型</span><span>{{ dataInfo.opinionType }}</span></p>
          </li>
          <li>
            <p><span>会计师事务所名称</span><span>{{ dataInfo.firmName}}</span></p>
            <p><span>报告日期</span><span>{{ dataInfo.reportTime}}</span></p>
          </li>
          <li v-for="(item,index) in dataInfo.assuranceBusinessDataRegisterSignatures" :key="index">
            <p><span>签字注册会计师{{ index+1}}</span><span>{{item.registrantName}}</span></p>
            <p><span>签字注册会计师{{ index+1}}执业证书号</span><span>{{ item.registrationCertificateNo }}</span></p>
          </li>
          <li>
            <p><span>通讯地址</span><span>{{ office.mailingAddress }}</span></p>
          </li>
          <li>
            <p><span>事务所电话</span><span>{{ office.operatorNumber }}</span></p>
          </li>
          <!--          <li>-->
          <!--            <p><span>报告备注说明</span><span>{{ dataInfo.officeRemarks }}</span></p>-->
          <!--          </li>-->
        </ul>
      </div>
      <p class="pageFooter">
      <span>
        业务报告使用防伪编码仅说明该业务报告是由依法批准设立的会计事务所出具，
      业务报告的法律责任主体是出具报告的会计师事务所及签字注册会计师。
      </span>
        <span>
        如对上述资料有疑问，请与上海市注册会计师协会联系，联系电话 021－64228466.
      </span>
        <span>版权所有：上海市注册会计师协会 沪 ICP 备 05007870</span>
      </p>
    </div>
    <div class="printBtn">
      <!--      <el-button type="primary" @click="handleDownload">下载</el-button>-->
      <el-button v-print="'#printMe'" type="primary">打印</el-button>
    </div>
    <el-dialog
      title="请输入报告文号"
      :visible.sync="dialogVisible"
      width="360px"
      :close-on-click-modal="false"
      append-to-body
      center
    >
      <el-form :model="commonForm" :rules="commonFormRules" ref="commonForm">
        <el-form-item prop="reason">
          <el-input v-model="commonForm.reason" type="textarea" :rows="8" placeholder="请输入报告文号..."></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit()">通过</el-button>
        <el-button @click="dialogVisible=false;">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getAntiCode, getAntiCodeByReportNo} from '@/api/system/assurance'
  import html2canvas from "html2canvas"

  export default {
    name: "CodeDetail",
    data() {
      return {
        antiCounterfeitingCoding: this.$route.query.antiCounterfeitingCoding,
        reportNo: this.$route.query.reportNo,
        dataInfo: {},
        office: {},
        dialogVisible: false,
        commonForm: {},// 报告文号表单
        commonFormRules: {
          reason: [
            {required: true, trigger: "blur", message: "报告文号不能为空"},
          ],
        },
      };
    },
    created() {
      if (this.antiCounterfeitingCoding && this.reportNo) {
        this.handleReportNoSubmit(this.reportNo,this.antiCounterfeitingCoding);
      };
      if (this.antiCounterfeitingCoding && this.reportNo == undefined) {
        this.getData(this.antiCounterfeitingCoding)
      }
    },
    methods: {
      handleStatus() {
        let dataInfo = this.dataInfo;
        if (dataInfo.dataStatus === '4') {
          return '已作废';
        } else if (dataInfo.applyForFinancialRefund === '1') {
          return '修改中';
        } else if (dataInfo.dataStatus === '9') {
          return '修改中';
        } else if (dataInfo.dataStatus === '2') {
          return '修改中';
        } else if (dataInfo.dataStatus === '6') {
          return '修改中';
        } else if (dataInfo.dataStatus === '0') {
          return '不予报备';
        } else {
          return '正常';
        }
      },
      getData(antiCounterfeitingCoding) {
        getAntiCode(antiCounterfeitingCoding).then(
          response => {
            let resCode = response.data.code;
            if (resCode !== 200) {
              this.$confirm(response.data.msg, '提示', {
                confirmButtonText: '返回',
                showClose: false,
                showCancelButton: false,
                closeOnClickModal: false,
                type: 'info'
              }).then(() => {
                this.$router.push({path: '/codeSearch'});
              });
            } else if (resCode == 555) {
              self.dialogVisible = true;
            } else {
              this.dataInfo = response.data.data;
              this.office = response.data.office;
              this.showData();
            }
          })
      },
      showData() {
        // 数据状态：0：不予报备，1：强审通过，2：数据异常，3：正常，4：作废，5：预上传，6：提交审核，7：审核通过，8：审核不通过,9：待确认
        if (this.dataInfo.dataStatus != 1 && this.dataInfo.dataStatus != 3 && this.dataInfo.dataStatus != 7 && this.dataInfo.dataStatus != 9 && this.dataInfo.dataStatus != 2) {
          this.$router.push({path: '/codeSearch'});
        } else {
          let reportType = this.dataInfo.reportType
          if (reportType === '上市公司审计' ||
            reportType === '一般企业审计' ||
            reportType === '国有大型企业审计' ||
            reportType === '事业单位审计' ||
            reportType === '上市公司新三板企业审计') {
            this.dataInfo.titleSuffixName = '财务报表审计报告'
          } else if (reportType === '上市公司内控鉴证') {
            this.dataInfo.titleSuffixName = '内部控制审计报告'
          } else if (reportType === '专项审计') {
            this.dataInfo.titleSuffixName = this.dataInfo.officeRemarks && this.dataInfo.officeRemarks != "" ? this.dataInfo.officeRemarks + '报告' : '专项审计报告'
          } else if (reportType === '验资') {
            this.dataInfo.titleSuffixName = '验资报告'
          } else if (reportType === '其他') {
            this.dataInfo.titleSuffixName = '非鉴证业务报告'
          }
        }
      },
      handleReportNoSubmit(reportNo, antiCounterfeitingCoding) {
        const reportno = encodeURI(reportNo);
        getAntiCodeByReportNo(reportno, antiCounterfeitingCoding).then(
          response => {
            let resCode = response.data.code;
            if (resCode === 200) {
              this.dataInfo = response.data.data;
              this.office = response.data.office;
              this.showData();
            } else if (resCode == 555) {
              this.$message({
                message: '报告文号不正确!',
                type: 'error'
              });
            } else {
              this.$message({
                message: '没有查到数据!',
                type: 'error'
              });
            }
          }).catch(function () {
        });
      },
      /** 下载*/
      handleDownload() {
        /** 生成图片*/
        html2canvas(this.$refs.imageWrapper).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          if (dataURL !== "") {
            /** 下载图片*/
            let alink = document.createElement("a");
            alink.href = dataURL;
            alink.download = this.dataInfo.customerName + this.dataInfo.auditYear + this.dataInfo.titleSuffixName + ".png";
            alink.click();
          }
        });
      },
    }
  }
  ;
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .contentBox {
    background: #f1f4f8;
    padding-bottom: 40px;

    .pageTitle {
      margin: 30px;
      color: #333;
      font-weight: 500;
      font-size: 20px;
      text-align: center;
    }

    .pageFooter {
      margin-top: 30px;
      font-size: 13px;
      color: #777;
      text-align: center;

      span {
        display: block;
        margin-top: 10px;
      }
    }

    .cardBox {
      width: 1100px;
      margin: 20px auto;
      padding-top: 15px;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, .2);
      overflow: hidden;

      .title {
        padding-left: 10px;
        border-left: 4px solid #0533f7;
        font-size: 16px;
        letter-spacing: 4px;
        font-weight: 500;
      }

      .detailUl {
        li {
          display: flex;
          justify-content: space-between;
          padding: 15px 0;

          p {
            span {
              display: inline-block;
              font-size: 16px;
            }

            span:first-child {
              color: #555;
              text-align: right;
              margin-right: 30px
            }

            span:last-child {
              color: #777;
              text-align: left;
            }
          }

          p:nth-child(1) {
            width: 58%;

            span:first-child {
              width: 180px;
            }
          }

          p:nth-child(2) {
            width: 54%;

            span:first-child {
              width: 220px;
            }
          }
        }

        li:nth-child(2n) {
          background: #f1f4f8;
        }
      }

      .invalidBox {
        height: 300px;
        text-align: center;
        font-size: 20px;

        .iconshibai {
          display: inline-block;
          margin: 40px 0;
          font-size: 90px;
          color: #e85252;
        }
      }

    }
  }

  .printBtn {
    width: 70px;
    margin: 0 auto;
  }

  .nocopy {
    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;
  }
</style>
